<template>
    <div class="home_container">
        <div class="left">
            <ShopInfo :shopQrCode="state.shopQrCode" />
            <Card v-for="item in state.cardList" :key="item.title" :data="item" />
        </div>
        <div class="right">
            <List />
        </div>
    </div>
</template>

<script setup>
import ShopInfo from './shopInfo.vue';
import Card from './card.vue';
import List from './list.vue';
import request from '@/request';
import { floatDivide } from '@/commons/utils';
import { setLayout, resetLayout } from '@/hooks/layout';
import { onMounted, onUnmounted, reactive } from 'vue';

const state = reactive({
    shopQrCode: '',
    cardList: [
        {
            title: '交易概览',
            list: [
                { num: '0', title: '今日销售金额', desc: '昨日：0', rmb: true, styles: { color: '#33302d' } },
                { num: '0', title: '今日订单数量', desc: '昨日：0', rmb: false, styles: { color: '#33302d' } },
                { num: '0', title: '本月商品销量', desc: '上月：0', rmb: false, styles: { color: '#33302d' } },
                { num: '0', title: '销售总额', desc: '', rmb: true, styles: { color: '#33302d' } },
                { num: '0', title: '订单总数', desc: '', rmb: false, styles: { color: '#33302d' } },
                { num: '0', title: '上架商品数', desc: '', rmb: false, styles: { color: '#33302d' } }
            ]
        },
        {
            title: '待办任务',
            list: [
                {
                    num: '0',
                    title: '待发货订单',
                    desc: '',
                    url: `${window.location.origin}/order/list?current=2`,
                    rmb: false,
                    styles: { color: '#ff6B00', cursor: 'pointer' }
                },
                {
                    num: '0',
                    title: '待退款订单',
                    desc: '',
                    url: `${window.location.origin}/order/refund?current=1`,
                    rmb: false,
                    styles: { color: '#ff6B00', cursor: 'pointer' }
                }
            ]
        },
        {
            title: '运营数据',
            list: [
                { num: '0', title: '昨日PV', desc: '', rmb: false, styles: { color: '#33302d' } },
                { num: '0', title: '昨日UV', desc: '', rmb: false, styles: { color: '#33302d' } },
                { num: '0', title: '本月累计新客户数', desc: '', rmb: false, styles: { color: '#33302d' } }
            ]
        }
    ]
});

// 逗号分隔 111,111.00
const onValueFormatter = v => `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
// 补零
const onZero = v => (v ? v.toFixed(2) : 0);

const getOrderAmout = async () => {
    const res = await request('queryOrderAmonutDetailServ');
    const data = res.data || {};
    state.shopQrCode = data.qrCode || '';
    // 交易概览
    const todaySales = onZero(floatDivide(data.todaySales, 100));
    const yesterdaySales = onZero(floatDivide(data.yesterdaySales, 100));

    state.cardList[0].list[0].num = onValueFormatter(todaySales);
    state.cardList[0].list[0].desc = `昨日：¥${onValueFormatter(yesterdaySales)}`;

    state.cardList[0].list[1].num = onValueFormatter(data.todayOrders);
    state.cardList[0].list[1].desc = `昨日：${onValueFormatter(data.yesterdayOrders)}`;

    state.cardList[0].list[2].num = onValueFormatter(data.thisMonthSales);
    state.cardList[0].list[2].desc = `上月：${onValueFormatter(data.lastMonthSales)}`;

    const allPromotion = onZero(floatDivide(data.allPromotion, 100));
    state.cardList[0].list[3].num = onValueFormatter(allPromotion);
    state.cardList[0].list[4].num = onValueFormatter(data.allOrdersNumber);
    state.cardList[0].list[5].num = onValueFormatter(data.allShelfNumbers);

    // 运营数据
    state.cardList[2].list[0].num = onValueFormatter(data.pageView);
    state.cardList[2].list[1].num = onValueFormatter(data.uniqueVisitor);
    state.cardList[2].list[2].num = onValueFormatter(data.newRegister);
};

// 待办任务
const getTask = async () => {
    const res = await request('queryWaitingTaskServ');
    const data = res.data || {};
    state.cardList[1].list[0].num = onValueFormatter(data.waitDeliveryNumber);
    state.cardList[1].list[1].num = onValueFormatter(data.waitAuditNumber);
};
onMounted(() => {
    setLayout();
    getOrderAmout();
    getTask();
});
onUnmounted(() => {
    resetLayout();
});
</script>

<style lang="scss" scoped>
.home_container {
    display: flex;
    .left {
        min-width: 60%;
        margin-right: 16px;
    }
    .right {
        min-width: 40%;
        background-color: #fff;
    }
}
</style>
